<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=300, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MobileBrowserExtension</title>
    <script src="./xterm_5_5_0/xterm.js"></script>
    <!-- <script src="./xterm_5_5_0/addon-canvas.min.js"></script> -->
    <!-- <script src="./xterm_5_5_0/addon-fit.min.js"></script> -->
    <!-- <script src="./xterm_5_5_0/addon-search.min.js"></script> -->
    <!-- <script src="./xterm_5_5_0/addon-webgl.min.js"></script> -->
    <script src="./xterm-pty_0_11_1/xterm-pty.min.js"></script>
    <script src="./eruda/eruda.js"></script>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./xterm_5_5_0/xterm.css">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        .eruda-container {
            height: 50vh !important;
            overflow-y: auto !important;
        }

        .line {
            border: 1px solid #ccc;
            border-radius: 24px;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <section>
        <div class="line">
            <h5>isSupportWebListener</h5>
            <div>
                <label for="webMessageListener">webMessageListener</label> <input type="checkbox"
                    name="webMessageListener" id="webMessageListener">
            </div>
            <div>
                <label for="postWebMessage">postWebMessage</label> <input type="checkbox" name="postWebMessage"
                    id="postWebMessage">
            </div>
        </div>
        <div class="line">
            <h5>isSupportWebChannel</h5>
            <div>
                <label for="createWebMessageChannel">createWebMessageChannel</label> <input type="checkbox"
                    name="createWebMessageChannel" id="createWebMessageChannel">
            </div>
            <div>
                <label for="webMessagePortSetMessageCallback">webMessagePortSetMessageCallback</label> <input
                    type="checkbox" name="webMessagePortSetMessageCallback" id="webMessagePortSetMessageCallback">
            </div>
            <div>
                <label for="webMessagePortClose">webMessagePortClose</label> <input
                    type="checkbox" name="webMessagePortClose" id="webMessagePortClose">
            </div>
            <div>
                <label for="webMessagePostMessage">webMessagePostMessage</label> <input
                    type="checkbox" name="webMessagePostMessage" id="webMessagePostMessage">
            </div>
            <div>
                <label for="postWebMessage">postWebMessage</label> <input
                    type="checkbox" name="postWebMessage" id="postWebMessage2">
            </div>
        </div>
    </section>
    <section>
        <div class="line">
            <h3>js 调用 native function </h3>
            <button onclick="invokeNativeFunction()">send message to android!</button>
        </div>
        <div class="line">
            <h3>js 调用 native function, 触发回调 </h3>
            <button onclick="invokeNativeFunctionRely()">send message to android!</button>
        </div>
        <div class="line">
            <h3>js 获取 native 值</h3>
            <button onclick="invokeNativeValue()">send message to android!</button>
        </div>
    </section>
    <div id="terminal"></div>
</body>

</html>